
<template>
  <transition  name="message" @after-leave="beforeUnload" @mouseleave="beforeUnload">        
    <div class="monkey-box-wrap"  :class="customClass"  v-show="visible" :style="styles"  ref="boxWrap">
      <slot></slot> 
    </div>
  </transition>
</template>
<script  lang="ts" setup>
import { computed, onMounted, ref} from "vue";
onMounted(() => {
  visible.value = true
  boxWrap.value.addEventListener("click",(e: Event)=>{
    e.stopPropagation()
  })
})
const props = defineProps(["top","left","width","bottom","upperPart","name"])
const boxWrap = ref()
const styles = computed(() => {
    return {
      left:props.left,
      width:props.width,
      bottom:props.upperPart ? "" : props.bottom,
      top:props.upperPart ? props.top : ""
    }
  }
)
const customClass = computed(() =>{
  return props.upperPart ? 'upPart' : 'belowPart'
})
let visible = ref<Boolean>(false)
const emit = defineEmits(['destroy'])
function beforeUnload(){
  if(props.name === "router"){
    emit('destroy')
  }
}
</script>

<style scoped lang="less">
.monkey-box-wrap{
  // min-height: 250px;
  position: fixed;
  z-index: 9999;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 8px 0 rgb(7 17 27 / 20%);
  border-radius: 8px;
  // padding: 10px;
  &::before{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: #fff;
    z-index: 1900;
    position: absolute;
    transform: rotate(45deg);
    left: 20px;
  }
}
.belowPart{
  &::before{
    bottom:-4px;
  }
}
.upPart{
  &::before{
    top:-4px;
  }
}
.message-enter-from{
  // transform: translateY(-100px);
  min-height: 0px;
  opacity: 0;
}
.message-enter-active {
  transition: all .2s ease-out;
}
.message-leave-active{
  transition: all .2s ease-out;
}
.message-leave-to{
  // transform: translateY(-100px);
  min-height: 0;
  opacity: 0;
}

</style>
